<template>
  <content-box>
    <template #title>总览</template>
    <template #content>
      <div class="left">
        <div id="echarts-dom-circle" ref="echartDom"></div>
        <div class="icon">
          <div class="icon__item">
            <img src="@image/memory.svg" alt="" />{{ props.deviceDetail.totalMemory }}GB
          </div>
          <div class="icon__item cpu">
            <img src="@image/cpu.svg" alt="" />{{ props.deviceDetail.usedCpu }}%
          </div>
          <div class="icon__item disk">
            <img src="@image/disk.svg" alt="" />{{
              Math.round((props.deviceDetail.usedDisk / props.deviceDetail.totalDisk) * 100 * 10) /
              10
            }}%
          </div>
        </div>
      </div>
      <div class="right">
        <div
          v-for="(item, index) in rightData"
          :key="item.title + index"
          class="right__box"
          :class="item.class"
        >
          <div class="right__title">{{ item.title }}</div>
          <div class="right__content">
            <div
              v-for="(sItem, sIndex) in item.data"
              :key="sItem.name + sIndex"
              class="right__item"
            >
              <div class="right__item__title circle" :class="sItem.class">{{ sItem.name }}</div>
              <div class="right__item__content">{{ sItem.value }}{{ sItem.endfix }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </content-box>
</template>

<script setup lang="ts">
import { defineProps, ref, onMounted, watch, reactive, toRefs } from 'vue'
import echarts from './echartsDep'
import type { EChartsOption } from './echartsDep'
import ContentBox from './ContentBox.vue'
import { useDeviceInfoStore } from '@renderer/store/deviceInfo'

const props = defineProps({
  deviceDetail: {
    type: Object,
    default: () => ({})
  }
})

enum Color {
  Unused = '#1bbb5d',
  MemoryUsed = '#5470c6',
  CpuUsed = '#fac858',
  DiskUsed = '#bf15de'
}

interface ItemData {
  name: string
  value: number
  class?: string
  endfix?: string
}

interface rightDataItem {
  title: string
  class?: string
  data: ItemData[]
}

const deviceDetail = { ...toRefs(props.deviceDetail) }

const deviceInfo = reactive(useDeviceInfoStore().deviceInfo)

const rightData: rightDataItem[] = reactive([
  {
    title: '内存',
    class: 'endline',
    data: [
      { name: '已使用', value: deviceDetail.usedMemory, class: 'memeory-used', endfix: ' GB' },
      { name: '未使用', value: deviceDetail.freeMemory, class: 'memeory-unuse', endfix: ' GB' }
    ]
  },
  {
    title: deviceInfo.cpuInfo || '处理器',
    class: 'endline',
    data: [
      { name: '物理核心数', value: deviceDetail.physicalCpuCount },
      { name: '逻辑核心数', value: deviceDetail.logicCpuCount }
    ]
  },
  {
    title: deviceDetail.diskName,
    data: [
      { name: '已使用', value: deviceDetail.usedDisk, endfix: ' GB' },
      { name: '总存储', value: deviceDetail.totalDisk, endfix: ' GB' },
      { name: '未使用', value: deviceDetail.freeDisk, endfix: ' GB' }
    ]
  }
])

// console.log(rightData)

const echartDom = ref(null)
let myChart
onMounted(() => {
  myChart = echarts.init(echartDom.value)
  updateEchart()
})
const updateEchart = (): void => {
  const option: EChartsOption = {
    tooltip: {
      trigger: 'item',
      confine: true
    },
    series: [
      {
        tooltip: {
          formatter: (params): string => {
            return `${params.name}: ${params.value}G`
          }
        },
        type: 'pie',
        radius: ['15%', '30%'],
        avoidLabelOverlap: false,
        labelLine: {
          show: false
        },
        color: [Color.DiskUsed, Color.Unused],
        label: {
          show: false
        },
        data: [
          { value: props.deviceDetail.usedDisk, name: '硬盘已使用' },
          { value: props.deviceDetail.freeDisk, name: '硬盘空闲' }
        ]
      },
      {
        tooltip: {
          formatter: (params): string => {
            return `${params.name}: ${params.value}%`
          }
        },
        type: 'pie',
        radius: ['45%', '60%'],
        avoidLabelOverlap: false,
        labelLine: {
          show: false
        },
        color: [Color.CpuUsed, Color.Unused],
        label: {
          show: false
        },
        data: [
          { value: props.deviceDetail.usedCpu, name: 'CPU已使用' },
          { value: 100 - props.deviceDetail.usedCpu, name: 'CPU空闲' }
        ]
      },
      {
        tooltip: {
          formatter: (params): string => {
            return `${params.name}: ${params.value}G`
          }
        },
        type: 'pie',
        radius: ['75%', '90%'],
        avoidLabelOverlap: false,
        color: [Color.Unused, Color.MemoryUsed],
        data: [
          { value: props.deviceDetail.freeMemory, name: '内存空闲' },
          { value: props.deviceDetail.usedMemory, name: '内存已使用' }
        ],
        label: {
          show: false
        }
      }
    ]
  }
  myChart.setOption(option)
}
watch(props.deviceDetail, () => {
  updateEchart()
})
</script>

<style lang="less" scoped>
@import '@renderer/assets/device.less';
#echarts-dom-circle {
  width: 130px;
  height: 130px;
}
.endline {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #6b6b6b;
}
.circle {
  &::after {
    .after-mixin();
    left: -12px;
  }
}
.icon {
  margin-top: 15px;
  &__item {
    position: relative;
    display: flex;
    align-items: center;
    color: #ffffff;
    margin-left: 35px;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 13px;
    img {
      width: 25px;
      height: auto;
      margin-right: 10px;
    }
    &::after {
      .after-mixin();
      left: -15px;
    }
    &:first-child {
      &::after {
        display: none;
      }
    }
  }
  .cpu {
    &::after {
      background-color: @CpuUsed;
    }
  }
  .disk {
    &::after {
      background-color: @DiskUsed;
    }
  }
}
.left {
  width: 45%;
}
.right {
  width: 50%;
  &__title {
    font-weight: bold;
    color: #ffffff;
    font-size: 12px;
    margin-bottom: 5px;
  }
  &__content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.right__item {
  width: 50%;
  margin-bottom: 5px;
  &__title {
    position: relative;
    color: #ababab;
    font-size: 12px;
  }
  &__content {
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
  }
  .memeory-used {
    &::after {
      background-color: @MemoryUsed;
    }
  }
  .memeory-unuse {
    &::after {
      background-color: @Unused;
    }
  }
}
</style>
